<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    
    <script>

        //****************************************  var、let区别：var：可越域、对同一变量多次声明、可先使用后声明。let：不可越域、对同一变量只能声明一次、只允许先声明后使用  **************************************** 
        // //1、作用域（action scope）
        // // var声明的变量会越域
        // // let声明的变量有严格的作用域，不能越域
        // {
        //     var as1 = 1;
        //     let as2 = 2;
        // }
        // console.log(as1); //1
        // console.log(as2); //as2 is not defined

        // //2、同一变量声明次数（time）
        // // var对同一个变量可以多次声明，相当于重新赋值
        // // let对同一个变量只能声明一次，否则报错：标识符 "*" 已经声明过了
        // var time1 = 1;
        // var time1 = 2;
        // let time2 = 3;
        // let time2 = 4;

        // console.log(time1); //2
        // console.log(time2); //Identifier 'time2' has already been declared

        // //3、是否变量提升（promote） 即是否能先使用后声明
        // // var能先使用（进行初始化为undefind），后声明（相当于再次声明）
        // // let只能声明后才能使用
        // console.log(promote1); //undefined   即初始化值为undefined
        // var promote1 = 1; 
        // console.log(promote2); //Cannot access 'promote2' before initialization
        // let promote2 = 2; 


        //****************************************  const:常量声明 ****************************************
        // // 声明后不允许改变（change）
        // const change = 1;
        // change = 2;
        // console.log(change); //Uncaught TypeError: Assignment to constant variable.  at es.html:47
    


        //****************************************  解构 {name:one,age,language} = person解析后赋值对应位置 ****************************************
        // // 数组对应赋值，对象对应赋值
        // let arr = [1,2,3];
        
        // let a = arr[0]; //老方法只能一个一个进行赋值
        // let b = arr[1];
        // let c = arr[2];

        // let [x,y,z] = arr; //解构，将数据解析出来，赋值给对应的位置

        // console.log(a,b,c); //1 2 3
        // console.log(x,y,z); //1 2 3

        // const person = {
        //     name: "jack",
        //     age: 18,
        //     language: ["java","c","js"]
        // }

        // const i = person.name; //老方法需要一个个声明然后赋值
        // const n = person.age;
        // const m = person.language;

        // const {name:one, age, language} = person; //解构对象，声明的变量必须与对象属性名一致，可以使用：赋值给另一个声明的变量
        // {name, age, language} 是{name:name, age:age, language:language}的简写
        // //原来是 name:one 即声明one变量，解构person中name属性值赋值给one

        // console.log(i,n,m);
        // console.log(name, one, age, language); //const one:void 表示无类型即无值  const one：String  表示String类型  const age：number 表示数字类型  const language：String[]  表示数组类型




        //****************************************  字符串: 内容包含判断、使用``、插入${} ****************************************
        // //1、字符串的扩展，变量内容开头包含，结尾包含，包含
        // let str = 'hello.vue';

        // console.log(str.startsWith("hello")) //true
        // console.log(str.endsWith("vue"))     //true
        // console.log(str.includes("he"))      //true

        // //2、字符串模板使用``包含内容更加方便
        // let html = `<div>
        //                 <span>html语法换行后使用“”会红色波浪线</span>
        //             </div>`;
        // console.log(html);

        // //3、在字符串中插入变量和表达式 使用${} 

        // function fun(){
        //     return '方法'
        // }

        // let name = "jack";
        
        // let info = `我叫${name},这是我写的一个${fun()}`

        // console.log(info);



        //****************************************  箭头函数 let sum = (a, b) => a + b; ****************************************
        // function add(a, b) {  //就方法的写法
        //     b = b + a;
        //     return b;
        // }

        // console.log(add(1,1));

        // function add1(a, b = 1) { //给b设置默认参数，如果参数只有一个，则赋值b = 1，如果参数有两个，则 b = 1 ==》 b = 参数2
        //     b = a + b;
        //     return b;
        // }
        // console.log(add1(7,7));


        // let sum1 = function(a, b) {
        //     return a + b;
        // }
        // console.log(sum1(1,1)); //2

        // let sum2 = (a, b)=>{
        //     return a + b;
        // }
        // console.log(sum2(1,1)); //2

        // let sum3 = (a, b) => a + b;
        // console.log(sum3(1,1)); //2


        // let person = {
        //     name: "jack",
        //     age: 18
        // }

        // function hello1(){
        //     return "我的名字叫" + person.name;
        // }
        // console.log(hello1());


        // let hello2 = () => {
        //     return "我的名字叫" + person.name;
        // }
        // console.log(hello2());

        // let hello3 = ({name}) => "我的名字叫" + name;    //{name}使用对象解构，出那么属性，并且变量为name
        // console.log(hello3(person));



        //****************************************  对象优化： ****************************************
        // //1、对象方法
        // const person = {
        //     name: "jack",
        //     age: 18,
        //     language: ["java","c","js"]
        // }

        // console.log(Object.keys(person));     //["name", "age", "language"]
        // console.log(Object.values(person));   //["jack", 18, Array(3)]
        // console.log(Object.entries(person));  //[Array(2), Array(2), Array(2)]
        // // [Array(2), Array(2), Array(2)]
        // //    0: (2) ["name", "jack"]
        // //    1: (2) ["age", 18]
        // //    2: (2) ["language", Array(3)]


        //****************************************  map映射，用于设置:arr = arr.map((item)=>item*2); ****************************************
        // let arr = [1,2,3];

        // //对数组中每个值都变成两倍
        // arr = arr.map((item)=>item*2);
        // console.log(arr);



        //****************************************  reduce：默认有四个参数 previousValue，currentValue, index, array ****************************************
        // let arr = [1,2,3];
        // let result = arr.reduce((a,b,c,d)=>{
        //     console.log("-------------------------")
        //     console.log("上一次处理结果：" + a);
        //     console.log("当前正在处理：" + b);
        //     console.log("索引：" + b);
        //     console.log("调用 reduce的数组：" + b);
        //     return a + b;
        // });

        // console.log(result);

        // //arr.reduce(calback,[initiva]Value)   callback:回滚，  Value：设置初始值
        // let result2 = arr.reduce((a,b)=>{
        //     console.log("-------------------------")
        //     console.log("上一次处理结果：" + a);
        //     console.log("当前正在处理：" + b);
        //     return a + b;
        // },100);  //设置初始值
        // console.log(result2);



        //****************************************  promise异步编排 ****************************************
        // //新建3个json，作为数据源使用
        // //***user.json***
        // // {
        // //     "id": 1,
        // //     "name": "zhangsan",
        // //     "password": "123456"
        // // }

        // //***user_corse_1.json***
        // // {
        // //     "id": 10,
        // //     "name": "chinese"
        // // }
        
        // //***corse_score_10.json***
        // // {
        // //     "id": 100,
        // //     "score": 90
        // // }

        // //1、就版本使用ajax
        // // 1)、查询用户信息
        // // 2)、根据用户id查询课程
        // // 3)、根据课程id查询分数
        // $.ajax({
        //     url: `user.json`,
        //     success(data) {
        //         console.log("查询用户信息：",data);

        //         $.ajax({
        //             url: `user_corse_${data.id}.json`,
        //             success(data) {
        //                 console.log("查询用户课程信息：", data);

        //                 $.ajax({
        //                     url: `corse_score_${data.id}.json`,
        //                     success(data) {
        //                         console.log("查询课程分数：",data);
        //                     },
        //                     error(data) {
        //                         console.log("查询课程分数失败：",data);
        //                     }
        //                 })
        //             },
        //             error(data) {
        //                 console.log("查询用户课程信息失败：",data);
        //             }
        //         })
        //     },
        //     error(data) {
        //         console.log("查询用户失败：",data);
        //     }
        // })


        // //2、Promise可以封装异步操作
        // // let p1 = new Promise((resolve,reject)=>{ //resolve:解决   reject：拒绝
        // //     if(true) {
        // //         resolve(data); //成功后往下传的参数
        // //     }else{
        // //         reject(error); //失败后往下传的参数
        // //     }
        // // });


        // //1、判断获取信息
        // let p2 = new Promise((resolve, reject)=>{
        //     $.ajax({
        //         url: `user.json`,
        //         success(data) {
        //             console.log("查询用户信息",data);
        //             resolve(data);
        //         },
        //         error(err) {
        //             reject(err);
        //         }
        //     })
        // })


        // //2、普通使用
        // p2.then((obj)=>{
        //     $.ajax({
        //         url: `user_corse_${obj.id}.json`,
        //         success(data) {
        //             console.log("查询课程",data);
        //         }
        //     })
        // }).catch((err)=>{
        //     console.log("查询用户失败")
        // })



        // //3、优化使用
        // p2.then((obj)=>{
        //     return new Promise((resolve,reject)=>{
        //         $.ajax({
        //             url: `user_corse_${obj.id}.json`,
        //             success(data) {
        //                 console.log("查询课程",data);
        //                 resolve(data);
        //         }
        //     })
        //     })
        // }).then((obj)=>{
        //     $.ajax({
        //             url: `corse_score_${obj.id}.json`,
        //             success(data) {
        //                 console.log("查询课程分数",data);
        //         }
        //     })
        // })




        //****promise优化使用****
        function get(url, data) {
            return new Promise((resolve, reject)=>{
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (data) {
                        reject(data);
                    }
                })
            });
        }

        get(`user.json`)
        .then((data)=>{
            console.log("查询用户信息",data);
            return get(`user_corse_${data.id}.json`);
        })
        .then((data)=>{
            console.log("查询课程信息",data);
            return get(`corse_score_${data.id}.json`);
        })
        .then((data)=>{
            console.log("查询分数信息",data);
        })





    </script>
</body>
</html>